<template>
    <view class="uni-popup-dialog">
        <view class="uni-dialog-title">
            <text
                class="uni-dialog-title-text"
                :class="['uni-popup__' + dialogType]"
            >
                {{ title }}
            </text>
        </view>
        <view class="uni-dialog-content">
            <text class="uni-dialog-content-text" v-if="mode === 'base'">
                {{ content }}
            </text>
            <input
                v-else
                class="uni-dialog-input"
                v-model="val"
                type="text"
                :placeholder="placeholder"
                :focus="focus"
            />
        </view>
        <view class="uni-dialog-button-group">
            <view class="uni-dialog-button" @click="close">
                <text class="uni-dialog-button-text">{{ closeText }}</text>
            </view>
            <block v-if="confirmType == 0">
                <view class="uni-dialog-button uni-border-left" @click="onOk">
                    <text class="uni-dialog-button-text uni-button-color">
                        {{ confirmText }}
                    </text>
                </view>
            </block>
            <block v-if="confirmType == 1">
                <view class="uni-dialog-button uni-border-left btns">
                    <button open-type="share">
                        <text class="uni-dialog-button-text uni-button-color">
                            {{ confirmText }}
                        </text>
                    </button>
                </view>
            </block>
            <!-- #ifdef MP-WEIXIN -->
            <block v-if="confirmType == 2">
                <view
                    class="uni-dialog-button uni-border-left"
                    @click="onNavto"
                >
                    <text class="uni-dialog-button-text uni-button-color">
                        {{ confirmText }}
                    </text>
                </view>
            </block>
            <!-- #endif -->
            <block v-if="confirmType == 3">
                <view class="uni-dialog-button uni-border-left">
                    <text
                        class="uni-dialog-button-text uni-button-color"
                        @click="onWebTo"
                    >
                        {{ confirmText }}
                    </text>
                </view>
            </block>
            <!-- #ifdef MP-WEIXIN -->
            <block v-if="confirmType == 4">
                <view
                    class="uni-dialog-button uni-border-left"
                    @click="onNavto2"
                >
                    <text class="uni-dialog-button-text uni-button-color">
                        {{ confirmText }}
                    </text>
                </view>
            </block>
            <!-- #endif -->
            <block v-if="confirmType == 5">
                <view class="uni-dialog-button uni-border-left">
                    <text
                        class="uni-dialog-button-text uni-button-color"
                        @click="onPreview"
                    >
                        {{ confirmText }}
                    </text>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
/**
 * PopUp 弹出层-对话框样式
 * @description 弹出层-对话框样式
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} value input 模式下的默认值
 * @property {String} placeholder input 模式下输入提示
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 * 	@value warning 提示
 * 	@value info 消息
 * 	@value error 错误
 * @property {String} mode = [base|input] 模式、
 * 	@value base 基础对话框
 * 	@value input 可输入对话框
 * @property {String} content 对话框内容
 * @property {Boolean} beforeClose 是否拦截取消事件
 * @event {Function} confirm 点击确认按钮触发
 * @event {Function} close 点击取消按钮触发
 */

export default {
    name: 'uniPopupDialog',
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        placeholder: {
            type: [String, Number],
            default: '请输入内容'
        },
        /**
         * 对话框主题 success/warning/info/error	  默认 success
         */
        type: {
            type: String,
            default: 'error'
        },
        /**
         * 对话框模式 base/input
         */
        mode: {
            type: String,
            default: 'base'
        },
        /**
         * 对话框标题
         */
        title: {
            type: String,
            default: '提示'
        },
        /**
         * 对话框内容
         */
        content: {
            type: String,
            default: ''
        },
        /**
         * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
         */
        beforeClose: {
            type: Boolean,
            default: false
        },
        confirmText: {
            type: String,
            default: '确定'
        },
        closeText: {
            type: String,
            default: '取消'
        },
        confirmType: {
            type: [String, Number],
            default: '0' | 0
        },
        mpAppid: {
            type: String,
            default: ''
        },
        mpPage: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dialogType: 'error',
            focus: false,
            val: ''
        };
    },
    inject: ['popup'],
    watch: {
        type(val) {
            this.dialogType = val;
        },
        mode(val) {
            if (val === 'input') {
                this.dialogType = 'info';
            }
        },
        value(val) {
            this.val = val;
        }
    },
    created() {
        // 对话框遮罩不可点击
        this.popup.mkclick = false;
        if (this.mode === 'input') {
            this.dialogType = 'info';
            this.val = this.value;
        } else {
            this.dialogType = this.type;
        }
    },
    mounted() {
        this.focus = true;
    },
    methods: {
        onPreview() {
            let _this = this,
                res = [],
                image =
                    this.$config.apiImageUrl +
                    uni.getStorageSync('sys_config').popup.popup_img;
            res.push(image);
            // 预览图片
            uni.previewImage({
                urls: res,
                longPressActions: {
                    itemList: ['保存图片'],
                }
            });
        },
        onWebTo() {
            let _this = this;
            // #ifdef APP-PLUS
            plus.runtime.openWeb(_this.mpPage);
            _this.close();
            // #endif
            // #ifdef MP-WEIXIN
            uni.navigateTo({
                url:
                    '/pages/webview/about?url=' +
                    encodeURIComponent(_this.mpPage),
                success() {
                    _this.close();
                }
            });
            // #endif
        },
        onNavto() {
            let _this = this;
            // 是否是短链接
            if (this.mpPage.indexOf('#小程序://') == -1) {
                uni.navigateToMiniProgram({
                    appId: _this.mpAppid,
                    path: _this.mpPage,
                    extraData: {},
                    success(res) {
                        _this.close();
                    }
                });
            } else {
                uni.navigateToMiniProgram({
                    shortLink: _this.mpPage,
                    success(res) {
                        _this.close();
                    }
                });
            }
        },
        onNavto2() {
            let _this = this;
            uni.navigateTo({
                url: _this.mpPage
            });
        },
        /**
         * 点击确认按钮
         */
        onOk() {
            this.$emit(
                'confirm',
                () => {
                    this.popup.close();
                    if (this.mode === 'input') this.val = this.value;
                },
                this.mode === 'input' ? this.val : ''
            );
        },
        /**
         * 点击取消按钮
         */
        close() {
            if (this.beforeClose) {
                this.$emit('close', () => {
                    this.popup.close();
                });
                return;
            }
            this.popup.close();
        }
    }
};
</script>

<style lang="scss" scoped>
.uni-popup-dialog {
    width: 300px;
    border-radius: 15px;
    background-color: #fff;
}

.uni-dialog-title {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 5px;
}

.uni-dialog-title-text {
    font-size: 16px;
    font-weight: 500;
}

.uni-dialog-content {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px 15px 15px 15px;
}

.uni-dialog-content-text {
    font-size: 14px;
    color: #6e6e6e;
}

.uni-dialog-button-group {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    border-top-color: #f5f5f5;
    border-top-style: solid;
    border-top-width: 1px;
}

.uni-dialog-button {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */

    flex: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 45px;
}

.uni-border-left {
    border-left-color: #f0f0f0;
    border-left-style: solid;
    border-left-width: 1px;
}

.uni-dialog-button-text {
    font-size: 14px;
}

.uni-button-color {
    color: $uni-color-primary;
}

.uni-dialog-input {
    flex: 1;
    font-size: 14px;
}

.uni-popup__success {
    color: $uni-color-success;
}

.uni-popup__warn {
    color: $uni-color-warning;
}

.uni-popup__error {
    color: $uni-color-error;
}

.uni-popup__info {
    color: #909399;
}

.btns button {
    line-height: inherit;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.btns button::after {
    border: none;
}
</style>
